<template>
    <div class="box" v-show="isShow" >
        <p>标题:   <input type="text" v-model="title1"></p>
        <p>内容： <input type="text" v-model="content1"></p>
        <p>是否公开： <van-switch v-model="status1" /></p>
        <button @click="ok(item,index)">确认</button>
    </div>
<div>
    <ul>
        <li v-for="(item,index) in list" :key="item.id">
           <p>{{ item.title }}</p>
           <p>{{ item.content }}</p>
           <p>是否公开:<van-switch v-model="item.status" /></p>
           <button @click="bianji(item,index)">编辑</button>
           <button @click="del(item)">删除</button>
        </li>
    </ul>
</div>



</template>
<script>

// import { showConfirmDialog } from 'vant';
import http from '@/ustils/http';
export default {
    data() {
        return {
            list: [],
            isShow: false,
            title1: '',
            title: '',
            content1: '',
            content: '',
            status1: '',
            status: '',
            isId:''
        }
    },
    created() {
        this.loadList()
    },
    methods: {
        // 封装一个列表
        loadList() {
            http({
            url: '/posts',
            method:'get'
        }).then(r => {
            console.log(r.data);
            this.list = r.data
            console.log(this.list);
        })
        },

        //删除
        del(item) {
            console.log(item);
            http({
                url: '/posts/' + item.id,
                method:'delete'
            }).then(r => {
                console.log(r.data);
                //刷新列表
                this.loadList()
            })
        },

        //编辑
        bianji(item,index) {
            console.log(item, index);
            this.isShow = 'true'
           this.isId=item.id
            console.log(this.isId);
            this.title1 = item.title
            console.log(this.title1,item.title);
            this.content1 = item.content
            this.status1 = item.status
            this.loadList()
        },
        //确定
        ok() {
            console.log(this.isId);
            http({
                url: '/posts/' + this.isId,
                method: 'put',
                data: {
                    title: this.title1,
                    content:this.content1,
                    status:this.status1,
                }
            }).then(r => [
                console.log(r.data),
                this.isShow=false
                
            ])


            // this.title=this.title1
            // this.content=this.content1

            // this.status=this.status1

            this.loadList()


        }

    }
}
</script>
<style scoped lang="scss" >
  .box{
    width: 500px;
    // height: 500px;
    background-color: cadetblue
  }
</style>
